<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">评价商品</p>
    </van-nav-bar>
    <van-cell title="星级评价">
      <van-rate
          v-model="star"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
      />
    </van-cell>
    <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入评价"
        show-word-limit
    />
    <van-uploader class="uploader" v-model="fileList" :after-read="afterRead" multiple :max-count="3"/>
    <div class="submitBar">
      <van-button type="danger" @click="submit()">提交</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { requestComments } from '../../api/commodity'
import { Field, Uploader, Rate } from 'vant'

Vue.use(Field)
Vue.use(Uploader)
Vue.use(Rate)
export default {
  name: 'Comments',
  data () {
    return {
      message: '',
      fileList: [],
      files: [],
      star: 0
    }
  },
  created () {
    const { proid } = this.$route.params
    console.log(proid)
  },
  methods: {
    back () {
      this.$router.back()
    },
    submit () {
      const form = new FormData()
      const { proid } = this.$route.params
      const { orderid } = this.$route.query

      if(!this.star||!this.message.length){
        this.$toast.fail({
          message:'输入不得为空'
        })
        return;
      }
      this.files.forEach(item => {
        form.append('pic', item)
      })
      form.append('star', this.star)
      form.append('content', this.message)
      form.append('proid', proid)
      form.append('userid', localStorage.getItem('userid') || '')
      form.append('orderid', orderid)
      requestComments(form).then(res => {
        this.$router.back()
        setTimeout(() => {
          this.$toast.success({
            message: res.msg
          })
        }, 1000)
      })
    },
    afterRead (file) {
      if (file instanceof Array) {
        this.fileList = file
      } else {
        this.fileList = [file]
      }
      this.files = this.fileList.map(item => item.file)
      console.log(this.files)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  text-align: left;
  font-size: 14px;
  color: #222;
  overflow: auto;
  background: #fff;
  padding: 10px;
  padding-bottom: 5px;

  .uploader {
    margin-top: 10px;
    padding: 0px 15px;
  }

  .submitBar {
    padding: 10px 15px;
    padding-bottom: 5px;
  }

  .van-uploader__wrapper {
    width: 100% !important;
  }
}

.van-field__body {
  textarea {
    height: 80px !important;
  }
}

</style>
